<template>
    <header class="ui-header">
        <div class="header-btn" @click="editModeClick">{{!editMode?'编辑':'完成'}}</div>
    </header>
    <div class="ui-page-holder"></div>

    <div v-if="list&&list.length>0 " class="productArea">
        <div v-for="val of list" class="cart-product">

            <div class="deleteArea" @click="deleteSKU(val._id,$index)" :style="{right:editMode?0:-60+'px'}"></div>

            <div class="tumb-slider" :style="{left:editMode?'-60px':0}">
                <div class="checkboxArea ui-v-a" @click="selectProduct($index)">
                    <div class="checkbox" :data-check="val.select+''"></div>
                </div>
                <img :src="val.pic+'?imageView2/1/w/200/h/200'">

                <div class="tumb-top ui-c-f">
                    <div class="thum-price">
                        <div class="ui-price price-red">{{val.price/10}}</div>
                        <div v-if="val.price_cost" class="ui-price price-gray">{{val.price_cost/10}}</div>
                    </div>
                    <h1>
                        {{val.title}}
                    </h1>

                    <div class="stock">
                        库存:{{val.stock}}件
                    </div>

                </div>
                <div class="ui-counter-wrap">
                    <span v-if="val.quantity>val.stock">库存不足</span>
                    <div class="ui-counter ui-c-f">
                        <div class="ui-decs ui-v-a" @click="descCount(val._id,$index)"></div>
                        <div class="quantity">
                            {{val.quantity}}
                        </div>
                        <div class="ui-add ui-v-a" @click="addCount(val._id,$index)"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else style=" text-align: center;
        font-size: 12px;
        color: #888888;
        padding: 8px;">
        购物车空空如也
    </div>


    <footer class="ui-c-f">
        <div class="select-all ui-v-a" @click="selectAll">
            <div class="checkbox" :data-check="isSelectAll+''"></div>
            <span>全选</span>
        </div>
        <button :class="['ui-btn-yellow', 'ui-v-a', isSelected?'':'un']" @click="clickfb"><span>立即下单</span></button>
        <div class="amountArea ui-v-a">
            <div>
                <div>合计
                    <div class="ui-price price ui-v-a"><span>{{amount/10}}</span></div>
                </div>
                <!--<div class="free-remain" v-if="isSelected">-->
                <!--<template v-if="lack>0">-->
                <!--还差<b>{{lack}}元</b>包邮-->
                <!--</template>-->
                <!--已包邮-->
                <!--</div>-->
            </div>
        </div>
    </footer>
</template>

<script type="text/babel">
    import http from '../libs/http'
    import Vue from 'vue'
    import {orderService} from '../stores/order'

    export default{
        data(){
            return {
                list: [],
                man: 0,
                cost: 0,
                isSelectAll: true,
                editMode: false,
            };
        },
        computed: {
            amount: function () {
                var amount = 0;

                this.list.forEach(function (product) {
                    if (product.select)
                        amount += product.price * product.quantity;
                });
                return amount;
            },

            isSelected: function () {

                var selelct = false;

                this.list.some(function (product) {
                    if (product.select) {
                        selelct = true;
                        return true;
                    }
                });

                return selelct;
            },

            lack: function () {
                return this.man - this.amount
            },

            isSelectAll: function () {
                var selectAll = true;
                this.list.some(function (product) {
                    if (!product.select) {
                        selectAll = false;
                        return true;
                    }
                });

                return selectAll;
            }

        },

        attached: function () {
            var self = this;
            http.get({
                url: api + 'cart/list',
                jsonp: true
            }).then(function (obj) {
                if (obj.code == 0) {
                    var tmp = [];
                    obj.data.list.forEach(function (product) {
                        product.select = true;
                        tmp.push(product);
                    });
                    self.list = tmp;
                }
            })
        },
        methods: {
            selectAll: function () {
                var isSelectAll = this.isSelectAll;

                for (var i in this.list) {
                    this.list[i].select = !isSelectAll;
                }
            },

            selectProduct: function (i) {
                var tmp = this.list[i];
                tmp.select = !tmp.select;
            },

            addCount: function (sku_id, i) {

                var self = this;
                if (self.list[i].quantity >= self.list[i].stock)
                    return;

                http.post({
                    url: api + 'cart/plus',
                    jsonp: true,
                    data: {
                        sku_id: sku_id
                    }
                }).then(function (obj) {
                    if (obj.code == 0) {
                        self.list[i].quantity++;
                    } else {
                        alert(obj.msg);
                    }
                })
            },
            descCount: function (sku_id, i) {
                var self = this;
                if (self.list[i].quantity <= 1)
                    return;

                http.post({
                    url: api + 'cart/minus',
                    jsonp: true,
                    data: {
                        sku_id: sku_id
                    }
                }).then(function (obj) {
                    if (obj.code == 0) {
                        self.list[i].quantity--;
                    } else {
                        self.$dispatch('toast', obj.msg);
                    }
                })
            },
            editModeClick: function () {
                this.editMode = !this.editMode;
            },

            deleteSKU: function (sku_id, i) {
                var self = this;
                http.post({
                    url: api + 'cart/remove',
                    jsonp: true,
                    data: {
                        sku_infos: [sku_id]
                    }
                }).then(function (obj) {
                    if (obj.code == 0) {
                        self.list.splice(i, 1);

                        db.set('cart_count', db.get('cart_count') - 1);
                    } else {
                        self.$dispatch('toast', obj.msg);

                    }
                })
            },
            clickfb: function () {
                if (this.isSelected) {
                    var query = {};

                    var isBreak = false;
                    this.list.some(function (product) {
                        if (product.select) {
                            if (product.quantity > product.stock) {

                                isBreak = product;
                                return true;
                            }

                            query[product._id] = product.quantity;
                        }
                    });

                    if (isBreak)
                        return this.$dispatch('toast', isBreak.title + ' 库存不足!');

                    orderService.create();
                    this.$route.router.go({name: 'confirmOrder', params: {skus: JSON.stringify(query)}});
                }
            }

        }
    }
</script>

<style scoped>
    .header-btn {
        float: right;
        height: 20px;
        line-height: 20px;
        padding: 12px 8px;
        color: white;
        font-size: 14px;
    }

    .ui-header {
        z-index: 1000;
    }

    .productArea {
        margin-bottom: 98px;
    }

    .cart-product {
        overflow: hidden;
        border-bottom: solid 1px #dddddd;
    }

    .cart-product:first-child {
        border-top: solid 1px #dddddd;
    }

    .deleteArea {
        width: 60px;
        height: 116px;
        text-align: center;
        position: relative;
        float: right;
        right: -60px;
        background: url("../../static/img/iconfont-trash.png") red no-repeat center;
        background-size: 32px;
        transition: right 0.3s;
        -webkit-transition: right 0.3s;
    }

    .checkboxArea {
        width: 40px;
        height: 100%;
        float: left;
        text-align: center;
    }

    .checkbox {
        width: 16px;
        height: 16px;
        background: url("../../static/img/spit_Checkbox.png") no-repeat;
        background-size: 16px;
        display: inline-block;
        vertical-align: middle;
    }

    .quantity {
        width: 28px;
        height: 28px;
        text-align: center;
        border: solid 1px #ddd;
        float: left;
        border-top: none;
        border-bottom: none;
        line-height: 28px;
    }

    .checkbox[data-check="false"] {
        background-position: 0 0;
    }

    .checkbox[data-check="true"] {
        background-position: 0 -16px;
    }

    h1 {
        font-size: 13px;
        font-weight: lighter;
        margin-right: 60px;
        margin-top: 8px;
    }

    .tumb-slider {
        width: 100%;
        height: 100px;
        position: relative;
        left: 0;
        padding-bottom: 8px;
        transition: left 0.3s;
        -webkit-transition: left 0.3s;
    }

    .tumb-slider > img {
        margin-right: 8px;
        display: block;
        float: left;
        width: 100px;
        height: 100px;
    }

    .tumb-top {
        height: 70px;
    }

    .thum-price {
        position: relative;
        left: 60px;
        float: right;
        margin-right: 8px;
        text-align: right;
    }

    .thum-price > * {
        display: block !important;
    }

    .ui-counter-wrap {
        position: absolute;
        right: 8px;
        bottom: 0;
        text-align: center;
    }

    .ui-counter-wrap > span {
        color: #f00;
        font-size: 11px;
    }

    .ui-counter {
        width: 86px;
        margin-bottom: 10px;
    }

    .stock {
        margin-top: 8px;
        font-size: 10px;
        color: #888888;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
        display: inline-block;
    }

    .price-gray {
        display: inline-block;
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    footer .ui-btn-yellow {
        float: right;
        padding: 0;
        height: 34px;
        margin: 7px 5px;
    }

    .select-all {
        color: white;
        float: left;
        height: 49px;
        padding-left: 8px;
        font-size: 14px;
    }

    .amountArea {
        color: white;
        text-align: right;
        font-size: 12px;
        float: right;
        height: 100%;
    }

    .amountArea > div {
        display: inline-block;
        vertical-align: middle;
    }

    footer .ui-price {
        color: #f9e043;
        display: inline-block;
    }

    .free-remain {
        font-size: 10px;
        color: #888888;
        font-weight: normal;
    }

    .free-remain b {
        color: #f9e043;
        padding: 0 3px;
        font-weight: normal;
    }

    footer .ui-btn-yellow.un {
        background: #dddddd;
        color: #888888;
    }

    footer .ui-btn-yellow.un {
        background: #dddddd;
        color: #888888;
    }
</style>